<template>
  <div class="replay-input-box">
    <div class="reply-header" v-if="comment">
      <span class="reply-to">回复 @{{ comment.userName }}:</span>
    </div>
    <div class="reply-input-area">
      <el-input
        v-model="content"
        type="textarea"
        :rows="3"
        placeholder="请输入回复内容..."
        @keyup.enter.native="submitReplay"
        resize="none"
      />
      <div class="reply-actions">
        <el-button size="small" @click="cancelReply">取消</el-button>
        <el-button type="primary" size="small" @click="submitReplay" :disabled="!content.trim()">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addComments } from "@/api/forum/comments";

export default {
  name: 'CommentReplay',
  props: {
    rootParentId: {
      type: [String, Number],
      required: true
    },
    comment: {
      type: Object,
      required: true
    },
    blogId: {
      type: [String, Number],
      required: true
    },
    getCommentList: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      content: '', // 输入框内容
      submitting: false // 提交状态
    }
  },
  methods: {
    // 提交回复
    async submitReplay() {
      if (!this.content.trim()) {
        this.$message.warning('回复内容不能为空')
        return
      }
      
      if (this.submitting) return
      
      this.submitting = true
      
      try {
        // 构造新评论对象
        const newComment = {
          postId: this.blogId,
          content: this.content.trim(),
          parentCommentId: this.comment.id || this.comment.commentId || this.comment.parentCommentId,
        }
        
        console.log('提交回复:', newComment)
        
        // 调用API添加评论
        const response = await addComments(newComment)
        
        if (response.code === 200) {
          this.$message.success("回复成功");
          // 刷新评论列表
          this.getCommentList()
          // 清空输入框并关闭回复框
          this.content = ''
          this.cancelReply()
        } else {
          this.$message.error(response.msg || "回复失败");
        }
      } catch (error) {
        console.error('回复失败:', error)
        this.$message.error("回复失败，请稍后重试");
      } finally {
        this.submitting = false
      }
    },
    
    // 取消回复
    cancelReply() {
      this.content = ''
      this.$emit('cancel-reply')
    }
  }
}
</script>
